<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="userSetRoleObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p>用户关联角色</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="modal-row overflow" style="height: 400px;">
            <div id="role-select" class="ztree" style="display: none"></div>
            <div class="table-ctrl-body">
              <div class="table-ctrl">

                <div class="table-header">
                  <table class="table-default">
                    <thead>
                      <tr>
                        <th v-for="ths in tableHeader">
                          {{ths.value}}
                        </th>
                      </tr>
                    </thead>
                  </table>
                </div>
                <!--{{tableRowHtml}}-->
                <div class="table-overflowX">
                  <table class="table-default">
                    <tbody>
                      <tr
                        v-for="(trs,index) in tableRowHtml.data"
                        @click="selectTr(trs,index)"
                        :class="{active : trs.isChecked}"
                      >
                        <td v-for="tds in tableHeader">
                          {{ [trs,tds.key] | roleStageCode }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">关闭</button>
          <button type="button" class="btn btn-info" @click="userSetRoleSub">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
      name: "userSetRole",
      props:["userSetRoleObj","activeUserId"],
      data(){
        return{
          setting : {
            data: {
              simpleData: {
                enable: true
              },
            },
            check:{
              chkStyle:"checkbox",
              chkboxType:{ "Y": "ps", "N": "ps" },
              enable:true
            }
          },
          userId:null,
          nodes:[],
          tableRowHtml:[],
          tableHeader:[
            {"key":"name","value":"角色名称"},
            {"key":"privilegeCode","value":"排序"},
            {"key":"stageCode","value":"等级"},
            {"key":"remark","value":"备注名"}
          ],
        }
      },
      watch:{
        userSetRoleObj:{
          handler(v1){
            //console.log(v1);
            if( v1.isShow === true ){
              //console.log(this.activeUserId);
              this.userId = this.activeUserId;
              //加载角色树
              this.relevanceTreeAjax();
            }
          },
          deep:true
        }
      },
      mounted(){
        const _this = this;
        this.setting.callback = { //选择用户
          onClick: function (event, treeId, treeNode) {
            //console.log(treeNode);
          }
        };
      },
      methods:{
        //关联提交
        userSetRoleSub(){
          //let selectArr = $.fn.zTree.getZTreeObj("role-select").getCheckedNodes();
          let getIDs = [];
          for( let i=0;i<this.tableRowHtml.data.length;i++ ){
            if( this.tableRowHtml.data[i].isChecked ){
              //getIDs.push( selectArr[i].id );
              getIDs.push( this.tableRowHtml.data[i].id );
            }
          }
          let params = {
            roleIds:getIDs
          };

          //console.log(params);
          ////console.log($.fn.zTree.getZTreeObj("role-select").getSelectedNodes());
          //return false;
          this.$axios.post(this.HOST+"/user/giveUserRole/"+this.userId,getIDs)
            .then((data)=>{
              if( data.data ){
                this.s_alert("授权成功");
                // alert("授权成功");
                this.s_logwrite("基础信息管理-用户管理","设置了角色授权");
                this.close();
              }
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        //加载关联树
        relevanceTreeAjax(){
          //加载树结构
          this.$axios.get(this.HOST+"/roles/",{
            params:{
              pageNum:1,
              pageSize:-1
            }
          })
            .then((data)=>{
              //console.log(data);
             /* this.nodes = data.data.data;
              $.fn.zTree.init($("#role-select"), this.setting, this.nodes);*/

              //this.tableRowHtml = data.data;
              let tableRowHtmlSession = data.data;

              //树结构勾选
              this.$axios.get(this.HOST+"/user/getRolesByUserId/"+this.userId)
                .then((data)=>{
                  ////console.log(data.data);
                  let rolesBuUserIdArr = data.data;
                  if( rolesBuUserIdArr.length > 0 ){//该用户存在角色授权
                    //console.log(tableRowHtmlSession.data);
                      for( let i=0;i<tableRowHtmlSession.data.length;i++ ){
                        tableRowHtmlSession.data[i].isChecked = false;
                        for( let k=0;k<rolesBuUserIdArr.length;k++ ){
                        if( tableRowHtmlSession.data[i].id === rolesBuUserIdArr[k].id ){
                          //console.log(tableRowHtmlSession.data[i]);
                          tableRowHtmlSession.data[i].isChecked = true;
                          break;
                        }
                      }
                    }
                  }else{
                    for( let i=0;i<tableRowHtmlSession.data.length;i++ ){
                      tableRowHtmlSession.data[i].isChecked = false;
                    }
                  }
                  this.tableRowHtml = tableRowHtmlSession;
                  ////console.log(tableRowHtmlSession);
                })
                .catch((err)=>{
                  //console.log(err);
                });
            })
            .catch((err)=>{
              //console.log(err);
            });
        },
        //选择角色
        selectTr(obj,index){
          //console.log(obj);
          obj.isChecked = obj.isChecked ? false : true;
        },
        //关闭授权弹窗
        close(){
          this.$emit("userSetRoleClose");
        }
      }
    }
</script>

<style scoped>

</style>
